.flex {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow: overlay;

  .tips {
    width: 100%;
    position: absolute;
    left: 0;
    padding-left: 30px;
    top: -10px;
    height: 35px;
    line-height: 35px;
    color: #333333;
    font-weight: 600;
    background-color: rgb(240, 242, 245);
  }

  .medium {
    width: auto !important;
    padding: 6px 15px !important;
  }

  .header {
    height: 60px;
    padding: 0 20px;
    line-height: 50px;
    color: #666666;
    // display: flex;

    >label {
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      float: left;
    }

    .text {
      display: flex;
      // flex: 1;

      >span {

        display: flex;
        position: relative;
        max-width: 33%;

        >label {
          font-size: 14px;
          font-weight: bold;
          width: 100px;
          text-align: right;
          position: absolute;
          left: 0;
          top: 0;
        }

        >span {
          // display: inline-block;
          // flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: 105px;
          min-width: calc(100% - 110px);
        }
      }
    }
  }

  .steps {
    width: 100%;
    margin: auto;
    border-bottom: 10px solid #f0f2f5;

    :global {
      .el-steps {
        padding: 24px;
        width: 600px;
        margin: auto;

        .el-step {
          &:last-child {
            .el-step__head {
              .el-step__line {
                // background-color: #C0C4CC;
              }

              &.is-finish,
              &.is-process {
                // color: #1890FF;
                // border-color: #1890FF;

                .el-step__line {
                  // background-color: #1890FF;
                }
              }
            }

            .el-step__main {
              .el-step__title {
                // color: rgba(0, 0, 0, 0.15);
                font-weight: bold;
                font-size: 14px;
                font-family: PingFangSC;

                &.is-process {
                  // color: #1592FF;
                }

                &.is-finish {
                  // color: #1592FF;
                }
              }
            }
          }

          .el-step__head {
            .el-step__line {
              background-color: #C0C4CC;
            }

            &.is-process {
              color: #333333;
              border-color: #333333;

            }

            &.is-finish {
              .el-step__line {
                // background-color: #1890FF;
              }
            }
          }

          .el-step__main {
            .el-step__title {
              // color: rgba(0, 0, 0, 0.15);
              font-weight: bold;
              font-size: 14px;
              font-family: PingFangSC;

              &.is-process {
                // color: #333333;
              }

              &.is-finish {
                // color: #1592FF;
              }
            }
          }
        }
      }
    }
  }

  .orderList {
    position: absolute;
    overflow: auto;
    overflow: overlay;
    top: 115px;
    left: 0;
    width: 100%;
    height: calc(~"100% - 115px - 25px");
    padding: 10px 20px 10px 20px;

    :global {
      .el-form {
        &.search-form {
          .el-row {
            .el-col {
              &:not(:first-child) {
                padding-left: 20px;
              }
            }
          }
        }
      }
    }

    .content {
      padding: 10px 20px 0 20px;

      :global {
        .el-form {
          display: flex;

          &>div:first-child {
            width: calc(100% - 160px);
          }

          &>div:last-child {
            margin-left: 10px;
            width: 150px;
          }

          .el-input__inner {
            height: 28px;
            line-height: 28px;
          }


          .el-form-item {
            flex: 1;
            display: flex;
            margin: 0;

            .el-form-item__label {
              width: 120px;
              white-space: nowrap;
              padding: 0 10px 0 0;
            }

            .el-input__inner {
              border-radius: 0;

              &.el-date-editor--daterange {
                margin: 5px 5px 0 0;

                .el-input__icon {
                  line-height: normal !important;
                }
              }
            }

            .el-form-item__content {
              flex: 1;
              padding: 0 20px 0 0;

              .el-button--primary {
                color: #409EFF;
                background-color: transparent;
              }

              .el-date-editor,
              .el-cascader,
              .el-select {
                width: 100%;
              }

              .el-date-editor {
                .el-range-separator {
                  padding: 0;
                  height: 28px;
                  line-height: 28px;
                }
              }
            }

            &:last-child {
              // max-width: 130px;

              .el-form-item__content {
                padding: 0;
              }
            }
          }
        }
      }

    }
  }

  .singleTable {

    //单选隐藏多选按钮
    :global {
      .el-table__header-wrapper {
        .el-checkbox {
          //找到表头那一行，然后把里面的复选框隐藏掉
          display: none
        }
      }
    }
  }

  .pagination {
    position: absolute;
    width: 100%;
    min-height: 46px;
    line-height: 46px;
    bottom: 0;
    z-index: 1;
    padding-top: 10px;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #EBEEF5;
    box-shadow: 0px -2px 4px 0px rgba(0, 0, 0, 0.1);

    .btn {
      min-width: 80px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      padding: 0;
    }

    .operations {
      border-top: 1px solid #F0F0F0;
      padding: 0 15px;

      // box-shadow:0px -2px 4px 0px rgba(0,0,0,0.1);
      .info {
        margin-left: 15px;
        color: #191F28;

        >span {
          font-weight: 600;
          color: #000;
          margin: 0 5px;
        }
      }

      :global {
        .el-button {
          margin: 0 15px;
        }
      }
    }

    .selection {
      width: 100%;
      display: flex;

      .tagName {
        width: 120px;
        min-width: 120px;
        text-align: right;
        color: #666666;

        i {
          color: #c2c2c2;
          margin-right: 5px;
        }
      }

      .tags {
        flex: 1;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        max-height: 92px;
        max-height: 92px;
        overflow: auto;

        :global {
          .el-tag {
            margin: 0 10px;
            height: 28px;
            line-height: 26px;
          }

          .el-button {
            margin-left: 20px;
          }
        }
      }
    }

  }
}